<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: white">
    <div style="width: 100%;height: 55px;background: white;display: flex" @click="fanhui">
      <div style="font-family: 'Avenir';font-size: 25px;margin: 15px 0 20px 20px"><van-icon name="arrow-left" /></div>
    </div>
    <div style="width: 85%;height: 180px;margin: 30px 0 0 30px;background: white">
      <div style="font-size: 35px; text-align: left;">设置新密码</div>
      <div style=" font-size: 16px; text-align: left;display: flex;color: darkgray">
        请输入6-20位字母与数字组合的密码</div>
    </div>
    <div style="width: 85%;height: 300px;margin: 0px 0 0 30px;background: white">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
          v-model="password1"
          type="password"
          label="请输入密码"
          @blur="validatePassword(password1)"
      />
      <van-field
          v-model="password2"
          type="password"
          label="请再次输入"
          @blur="validatePassword(password2)"
      />
      <van-button type="primary" style="width: 100%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 40px; border-radius:50px;" @click="phoneUpdate">确定</van-button>
    </div>

  </div>

</template>

<script>
import { ref } from 'vue';

import {userPhoneUpdate ,userPasswordUpdate , userPayPasswordUpdate, Delete, yzm} from "@/api/SetUp/AccountSafe/accountSafa"

export default {
  setup() {
    const password1 = ref('');
    const password2 = ref('');

    return { password1 , password2};
  },
  data() {
    return {
      query:{
        name:null
      },
      yzm:'',
      count:0,
      entry:false,
      user:JSON.parse(localStorage.getItem('login')),
    };
  },
  created() {
    this.query=this.$route.query;
  },
  methods: {
    validatePassword(password) {
      console.log(password)
      if(password!=null){
        const regex = /^[a-zA-Z0-9]{6,20}$/;
        if (regex.test(password)) {
          this.$toast('密码格式正确');
          this.entry=true;
        } else {
          this.$toast('密码格式不正确，请输入6-20位数字或字母');
          this.entry=false;
        }
      }

    },
    fanhui(){
      this.$router.push('/accountSafe')
    },
    phoneUpdate(){
      if(this.password1=='' || this.password2==''){
        this.$toast('请输入密码');
        return;
      }
      if(this.password1 != this.password2){
        this.$toast('两次密码输入不一致');
        return;
      }

      if(this.entry){
        this.user.password=this.password1;
        userPasswordUpdate(this.user).then(row => {
            // this.user2=this.user
            // localStorage.removeItem("login");
            // localStorage.setItem('login', JSON.stringify(this.user2));
            localStorage.removeItem("login");
            this.$toast('修改成功');
            this.$router.push('/login/PasswordLogin')

        })
      }else{
        this.$toast('请输入格式正确的密码');
      }


    },

  },
};
</script>

<style scoped>

</style>
